<template>
	<div class="order">
		<aside>
			<span>书城管理——订单查询</span>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<div class="set">
			<div class="set2">
				<div class="select">
					<el-select v-model="selectOrd.payStatus">
						<el-option value="-请选择-">-请选择-</el-option>
						<el-option value="未付款">未付款</el-option>
						<el-option value="已付款">已付款</el-option>
					</el-select>

					<el-select v-model="selectOrd.shipStatus">
						<el-option value="-请选择-">-请选择-</el-option>
						<el-option value="未发货">未发货</el-option>
						<el-option value="已发货">已发货</el-option>
						<el-option value="已签收">已签收</el-option>
					</el-select>

					<el-select v-model="selectOrd.days">
						<el-option value="-请选择-">-请选择-</el-option>
						<el-option value="7天以内">7天以内</el-option>
						<el-option value="15天以内">15天以内</el-option>
						<el-option value="30天以内">30天以内</el-option>
						<el-option value="60天以内">60天以内</el-option>
						<el-option value="120天以内">120天以内</el-option>
					</el-select>

				</div>
				<div class="input">
					<el-input v-model="selectOrd.account" placeholder="下单人-账号"></el-input>
					<el-input v-model="selectOrd.phone" placeholder="下单人-手机号"></el-input>
					<el-input v-model="selectOrd.nickname" placeholder="下单人-姓名"></el-input>
				</div>
			</div>
			<div class="btu">
				<button @click="add()"><i class="el-icon-search"></i></button>
			</div>
		</div>
		<template>
			<el-table :data="orders" style="width: 95%;margin: 0 auto;" border>
				<el-table-column type="expand">
					<template slot-scope='props'>
						<div style="width: 60%;margin: 0 auto; display: flex;justify-content: space-between;">
							<span>账号:{{props.row.user.account}}</span>
							<span>电话:{{props.row.user.phone}}</span>
							<span>下单:{{props.row.user.nickname}}</span>
							<span>快递:{{props.row.shipper}}</span>
						</div>
						<el-table :data="props.row.items" style="width: 60%; margin: 0 auto;" border>
							<el-table-column label="图片">
								<template slot-scope="scope">
									<el-image style="width: 70px; height: 50px"
										:src="`${$ip}/api/public/showimg/${scope.row.book.pic}`">
									</el-image>
								</template>
							</el-table-column>
							<el-table-column prop="book.name" label="名称">
							</el-table-column>
							<el-table-column prop="num" label="数量">
							</el-table-column>
							<el-table-column prop="price" label="单价">
							</el-table-column>
							<el-table-column prop="book.stock" label="库存">
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column prop="ordid" label="订单号">
				</el-table-column>
				<el-table-column prop="ship2addr" label="收货地址">
				</el-table-column>
				<el-table-column prop="ship2phone" label="电话">
				</el-table-column>
				<el-table-column prop="shipno" label="发货单号">
				</el-table-column>
				<el-table-column prop="tcreate" label="下单时间">
				</el-table-column>
				<el-table-column prop="amount" label="总价">
				</el-table-column>
				<el-table-column prop="payStatus" label="付款">
				</el-table-column>
				<el-table-column prop="shipStatus" label="收货">
					<template slot-scope="scope">
						<el-button type="danger" @click="goupdate(scope.row.ordid)"
							v-show="scope.row.shipStatus ==0">未发货</el-button>
						<el-button type="primary" v-show="scope.row.shipStatus ==1">已发货</el-button>
						<el-button type="success" v-show="scope.row.shipStatus ==2">已收货</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<div class="more" @click="more()"><button>显示更多</button></div>
		<el-dialog title="发货" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="发货单号" :label-width="formLabelWidth">
					<el-input v-model="form.shipno" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="快递" :label-width="formLabelWidth">
					<el-input v-model="form.shipper" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="update()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: 'Order',
		data() {
			return {
				pagenum: 1,
				lines: 5,
				orders: [],
				selectOrd: {
					payStatus: '',
					shipStatus: '',
					days: '',
					phone: '',
					account: '',
					nickname: ''
				},
				total: 0,
				dialogFormVisible: false,
				form: {
					shipno: '',
					shipper: '',
				},
				formLabelWidth: '120px',
				ordid: 0,
			}
		},
		computed: {
			find() {
				return (val) => {
					let year = new Date(val).getFullYear();
					let m = new Date(val).getMonth();
					let day = new Date(val).getDate();
					return `${year}-${m}-${day}`
				}
			},
			day() {
				return (val) => {
					switch (val) {
						case '7天以内':
							return 7;
							break;
						case '15天以内':
							return 15;
							break;
						case '30天以内':
							return 30;
							break;
						case '60天以内':
							return 60;
							break;
						case '120天以内':
							return 120;
							break;
					}
				}
			},
			pay() {
				return (val) => {
					switch (val) {
						case '未付款':
							return 0;
							break;
						case '已付款':
							return 1;
							break;
					}
				}
			},
			ship() {
				return (val) => {
					switch (val) {
						case '未发货':
							return 0;
							break;
						case '已发货':
							return 1;
							break;
						case '已收货':
							return 2;
							break;
					}
				}
			}
		},
		methods: {
			goupdate(id) {
				console.log(id);
				this.ordid = id;
				let time = new Date();
				this.form = {
					shipno: `${time.getFullYear()}${time.getMonth()}${time.getDate()}${id}`,
				}
				this.dialogFormVisible = true;

			},
			update() {
				this.dialogFormVisible = false,
					this.$postkv(`/api/adm/ord/updateShip/${this.ordid}`, this.form).then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								message: resp.data.msg,
								type: 'success'
							})
							this.add();
						} else {
							this.$message({
								message: resp.data.msg,
								type: 'error'
							})
						}
					})
				this.orders = [];

			},
			html() {
				location.reload();
			},
			more() {
				if (this.total - (this.lines * this.pagenum) <= 0) {
					this.$message({
						message: '没有更多',
						type: "error",
					});
					return;
				}
				this.pagenum += 1;
				console.log(this.pagenum);
				this.add();
			},
			add() {
				this.orders = [];
				console.log(this.selectOrd);
				let form = {
					payStaus: this.pay(this.selectOrd.payStatus),
					shipStaus: this.ship(this.selectOrd.shipStatus),
					days: this.day(this.selectOrd.days),
					phone: this.selectOrd.phone,
					account: this.selectOrd.account,
					nickname: this.selectOrd.nickname
				}
				console.log(form);
				this.$postkv('/api/adm/ord/findPageOrders2u/' + this.pagenum + '/' + this.lines, form).then((resp) => {
					resp.data.data.orders.forEach((item) => {
						item.tcreate = this.find(item.tcreate);
						item.tship = this.find(item.tship);
						item.payStatus = item.payStatus == 0 ? '未付款' : '已付款';
						this.orders.push(item);
					})
					this.total = resp.data.data.total;
					console.log(this.orders);
				})
			}
		}

	}
</script>

<style scoped>
	a {
		color: white;
	}

	.order {
		width: 83%;
		height: 90vh;
		margin-left: 2%;
	}

	.order aside {
		width: 95%;
		margin: 20px auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: gainsboro 1px solid;
	}

	.order aside button {
		background-color: #009688;
		border: none;
		outline: none;
		color: white;
		height: 40px;
		width: 60px;
		border-radius: 3px;
	}

	.order aside span {
		font-size: 15px;
	}

	.select {
		width: 80%;
		margin: 10px auto;
		display: flex;
		justify-content: space-between;
	}

	.input {
		width: 80%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.input .el-input {
		width: 250px;
	}

	.set {
		width: 95%;
		margin: 0 auto;
		display: flex;
	}

	.set .set2 {
		width: 80%;
	}

	.set .btu {
		width: 20%;
		display: flex;
		align-items: center;
	}

	.set .btu button {
		height: 40px;
		width: 80px;
		color: white;
		background-color: #009688;
		border-radius: 5px;
		border: none;
		font-size: 20px;
	}

	.more {
		width: 95%;
		text-align: center;
	}

	.more button {
		height: 30px;
		width: 200px;
		background-color: #409eff;
		border: none;
		outline: none;
		color: white;
		border-radius: 5px;
	}
</style>